﻿@model IEnumerable<Vefskil5.Models.AudioBlaster3000>

@{
    ViewBag.Title = "MusicPlayer3000";
}

 <header>
        <div class="content-wrapper">       
            <div class="float-left">
                <p class="site-title">MusicPlayer3000</p>
            </div>
        </div>
    <!-- Makes the filter -->
   <script type="text/javascript" charset="utf-8" src="/DataTables-1.9.0/media/js/jquery.js"></script>
   <script type="text/javascript" charset="utf-8" src="/DataTables-1.9.0/media/js/jquery.dataTables.js"></script>

         <script>
         $(document).ready( function () {
           $('#songs').dataTable();
       } );
       </script>

</header>
    <audio controls="controls"></audio>
    <div id="body">
        </script>
        <!-- gets our songs and plays them -->
        <script type="text/javascript">
            $(document).ready(function () {
                function getSongTabs() {
                    var songTitle = audioplayer_1.currentSongTitle();
                    var url_temp = '/api/values/getSongs/?Title=' + songTitle;
                    $.ajax({
                        url: url_temp,
                        dataType: 'jsonp',
                        success: function (data) {
                            data = JSON.parse(data);
                            console.log(data);
                            $("#audioblaster").html('<pre>' + data.objects[0].body + '</pre>');
                            console.log(data.objects[0].body);
                        },
                        error: function (data) {
                            console.log('error');
                        }
                    });
                }
            });
        </script>
        <div id="container">
            <fieldset>
                <form id="upload_file" method="post" enctype="multipart/form-data" action="~/api/values/">
                <input type="hidden" name="id" id="id" value="1" />
                <input name="file" id="file" size="27" type="file" /><br />
                <input type="submit" name="action" value="Upload" />
                <span id="status" style="display:none"><a href="">Refresh song list</a></span>
                <iframe id="target_upload" name="target_upload" src="" style="width:0;height:0;border:0px"></iframe>
	            </form>
                <table id="songs" class="tablesorter">
                <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Artist)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Genre)
                </th>
                <th></th>
            </tr>
            </thead>

        <tbody>
        @foreach (var item in Model) {
            <tr>
                <td>
                    <a href="#">@Html.DisplayFor(modelItem => item.Title)</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Artist)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Genre)
                </td>
                <td>
                <!-- makes it available to play songs when we click the title on our html -->
                    @Html.HiddenFor(modelItem => item.Id, new { @class="id" })
                    <input type="hidden" class="link" value="@item.FileName" />
                </td>
            </tr>
        }
        </tbody>

        </table>
            </fieldset>
            <fieldset>
            <!-- our mp3 player -->
                <div id="audioblaster"></div>
                
                <div>
                    
                </div>
            </fieldset>
        </div>
    </div>
<script type="text/javascript">
/* Get the songs from GuitarParty */
    $(function () {
        $("#getsongs").click(function () {
            $.getJSON("/api/values", function (data) {
            });
        });
        $("a").click(function () {
            var id = $(this).parent().siblings().last().children("input[class='id']").val();
            var link = $(this).parent().siblings().last().children("input[class='link']").val()
            $.getJSON('api/song/' + id, function (data) {
                var d = $.parseJSON(data);
                console.log(d);
                var text = "";
                if (d.objects_count > 0) {
                    text = d.objects[0].body;
                } else {
                    text = "Did not find any guitar tabs!";
                }

                $("div").last().html("").append("<pre>" + text + "</pre>");
                $("audio").html("");
                $("audio").append("<source src='" + link + "' type='audio/mp3'/>");
            });
        });
    });

    function initUpload() {

        /*set the target of the form to the iframe and display the status
        message on form submit.
        */
        document.getElementById('upload_file').onsubmit = function () {
            document.getElementById('upload_file').target = 'target_upload';
            document.getElementById('status').style.display = "block";

        }
    }
    function uploadComplete(status) {
        document.getElementById('status').innerHTML = status;
    }
    window.onload = initUpload;
</script>


